<template>
  <Container v-loading='loading' class="node-edit">
    <Tabs value="tab">
      <Button 
        size="large" 
        class="item" 
        type="primary" 
        slot="extra"
        icon="plus"
        @click="onAddCategory">新增节点</Button>
        <TabPane label="组织架构" name="tab">
          <zk-table
            empty-text="亲，没有找到相关记录哦！~"
            ref="table"
            sum-text="sum"
            index-text="#"
            :height="options.tableHeight + 80"
            :data="list.data"
            :columns="list.columns"
            :stripe="props.stripe"
            :border="props.border"
            :show-header="props.showHeader"
            :show-summary="props.showSummary"
            :show-row-hover="props.showRowHover"
            :show-index="props.showIndex"
            :tree-type="props.treeType"
            :is-fold="props.isFold"
            :expand-type="props.expandType"
            :selection-type="props.selectionType">
            <template slot="modify" slot-scope="scope">
              <Button size="small" type="primary" @click="onEdit(scope.row)">编辑</Button>
              <Button size="small" type="warning" @click="deleteCaregory(scope.row)">删除</Button>
            </template>
            <template slot="type" slot-scope="scope">
              <div>{{scope.row.productType | productType}}</div>
            </template>
            <!-- <template slot="isUsing" slot-scope="scope">
              <i-switch v-model="scope.row.isEnabled" @on-change="onEnabled(scope.row)"></i-switch>
            </template> -->
          </zk-table>
        </TabPane>
    </Tabs>
    <Loader :status="list.status" @refresh="getData"></Loader>
    <NodeAddItem @complete="getData" ref="addCategory" :typeList="typeList"></NodeAddItem>
  </Container>
</template>
<script>
import NodeAddItem from './edit/NodeAddItem'
import list from './list/NodeEditData'
import table from '@/table'
export default {
  components: {
    NodeAddItem
  },
  data() {
    return {
      loading: true,
      small: 'small',
      props: {
        stripe: true,
        border: false,
        showHeader: true,
        showSummary: false,
        showRowHover: true,
        showIndex: false,
        treeType: true,
        isFold: false,
        expandType: false,
        selectionType: false
      },
      list: list,
      typeList: [],
      height: null,
      options: {
        tableHeight: 300
      }
    }
  },
  mounted() {
    this.initTable()
    this.getData()
  },
  methods: {
    ...table,
    getData() {
      this.list.status = 'loading'
      this.$ajaxGet('/department/list').then(data => {
        this.list.status = 'pass'
        this.list.data = (data || []).map(item => {
          return {
            id: item.id,
            name: item.name,
            title: item.title,
            isEnabled: item.isEnabled,
            sort: item.sort,
            productType: item.productType,
            parentId: item.parent_id,
            param: item.param,
            list_order: item.list_order,
            type: item.type,
            is_open: item.is_open,
            sort: item.sort,
            children: (item.child || []).map(m => {
              return {
                id: m.id,
                name: m.name,
                title: m.title,
                isEnabled: m.isEnabled,
                sort: m.sort,
                productType: m.productType,
                parentId: m.parent_id,
                param: m.param,
                list_order: m.list_order,
                type: m.type,
                is_open: m.is_open,
                sort: m.name,
                children: (m.child || []).map(j => {
                  return {
                    id: j.id,
                    name: j.name,
                    title: j.title,
                    isEnabled: j.isEnabled,
                    sort: j.sort,
                    productType: j.productType,
                    parentId: j.parent_id,
                    param: j.param,
                    list_order: j.list_order,
                    type: j.type,
                    is_open: j.is_open,
                    sort: j.sort
                  }
                })
              }
            })
          }
        })
        this.setData()
      })
    },
    setData() {
      let list = (this.list.data || []).map(parent => {
        let parentTarget = {
          id: parent.id,
          label: parent.name
        }
        if (parent.children.length) {
          let childList = parent.children.map(child => {
            let childTarget = {
              id: child.id,
              label: child.name
            }
            if (child.children.length) {
              let grandsonList = child.children.map(grandson => {
                return {
                  id: grandson.id,
                  label: grandson.name
                }
              })
              childTarget.children = grandsonList
            }
            return childTarget
          })
          parentTarget.children = childList
        }
        return parentTarget
      })
      this.typeList = list
      this.typeList.unshift({id: '0', label: '顶级分类'})
    },
    onEnabled(e) {
      let url = `/product/supplier_category/disable/${e.id}`
      if (e.isEnabled) {
        url = `/product/supplier_category/enabled/${e.id}`
      }
      this.$jsonPost(url).then((data) => {
        this.getData()
      })
    },
    onAddCategory() {
      this.$refs['addCategory'].open()
    },
    onEdit(row) {
      this.$refs['addCategory'].open(row)
    },
    deleteCaregory(row) {
    
      this.$Modal.confirm({
        title: '删除',
        content: '确定删除此节点吗？',
        onOk: () => {
          this.$jsonPost(`/department/del`, { id: row.id }).then(res => {
            this.$Notice.success({
              title: '删除成功'
            })
            this.getData()
          })
        }
      })
    }
  }
}
</script>

